<template>
	<view class="evaluation-list-content">
		<view class="search-bar">
			<view class="search-row">
				<view class="search-input">
					<u-input type="text" :border="false" :custom-style="searchInputStyle" v-model="searchParams.storeName" placeholder="请输入门店名称"/>
					<view class="search-btn" @click="reloadData"><u-icon name="search" color="#666666" size="32"></u-icon></view>
				</view>
			</view>
			<view class="search-row flex-row">
				<view class="search-text">调研周期：</view>
				<view class="search-selector" @click="isShowYearQuarterPicker=true">{{searchParams.yearTime}}<u-icon name="arrow-down-fill" color="#666666" size="16"></u-icon></view>
				<view class="search-selector" @click="isShowYearQuarterPicker=true">{{searchParams.quarterTime}}<u-icon name="arrow-down-fill" color="#666666" size="16"></u-icon></view>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="item in evaluationList" @click="toEdit(item)">
				<view class="item-content">
					{{item.storeName}}
				</view>
				<view class="item-state" :class="item.isEvaluation=='已填写'?'finished':''">
					{{item.isEvaluation}}
				</view>
			</view>
		</view>
		
		<u-select mode="mutil-column-auto" :list="yearQuarterData" v-model="isShowYearQuarterPicker" @confirm="handleSelectYearQuarter"></u-select>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import utils from '../../common/utils.js'
	import { MemberInfoByMemCode, xcxYear, xcxIsEvaluation } from '../../common/service.js'
	export default {
		data() {
			return {
				searchInputStyle:{
					height: '88rpx',
					backgroundColor: '#F7F7F7',
					fontSize: '28rpx',
					fontFamily: 'PingFangSC-Regular',
					color: '#333333'
				},
				isShowYearQuarterPicker:false,
				yearQuarterData:[],
				searchParams:{
					code:"",
					storeName:"",
					yearTime:"",
					quarterTime:"",
					quarterId:"",
					rp02name:"",
					rp03name:"",
					brand:"",
					pageNum:1,
					pageSize:10
				},
				hasMore:true,
				evaluationList:[]
			}
		},
		methods: {
			handleSelectYearQuarter(e){
				this.searchParams.yearTime = e[0].value
				this.searchParams.quarterTime = e[1].label
				this.searchParams.quarterId = e[1].value
				this.reloadData()
			},
			getMemberInfoByMemCode(memcode, call){
				MemberInfoByMemCode({memcode}, res=>{
					if(res.data.status=="00000"){
						this.searchParams.rp02name = res.data.data[0].RP02NAME
						this.searchParams.rp03name = res.data.data[0].RP03NAME
						this.searchParams.brand = res.data.data[0].RP05NAME
						if(call){
							call()
						}
					}else{
						this.$refs.uToast.show({
							title: '获取用户信息失败',
							type: 'error',
							duration: 3000
						});
					}
				})
			},
			getXcxYear(call){
				xcxYear({}, res=>{
					if(res.data.code==200){
						let data = res.data.data
						let yearQuarterData = []
						for(let i in data){
							for(let j in data[i]){
								data[i][j].value = data[i][j].id
								data[i][j].label = data[i][j].quarterTime
							}
							yearQuarterData.push({value: i, label: i, children:data[i]})
						}
						this.yearQuarterData = yearQuarterData
						if(this.yearQuarterData.length){
							let year = new Date().getFullYear()
							let findYear = this.yearQuarterData.find(obj=>{
								return obj.label.indexOf(year)>-1
							})
							if(findYear){
								this.searchParams.yearTime = findYear.value
								if(findYear.children.length){
									let quarter = ''
									let month = new Date().getMonth()+1
									if(month>=1&&month<=3){
										quarter = '第一季度'
									}else if(month>=4&&month<=6){
										quarter = '第二季度'
									}else if(month>=7&&month<=9){
										quarter = '第三季度'
									}else if(month>=10&&month<=12){
										quarter = '第四季度'
									}
									let findQuarter = findYear.children.find(obj=>{
										return obj.label.indexOf(quarter)>-1
									})
									if(findQuarter){
										this.searchParams.quarterTime = findQuarter.label
										this.searchParams.quarterId = findQuarter.value
									}else{
										this.searchParams.quarterTime = findYear.children[0].label
										this.searchParams.quarterId = findYear.children[0].value
									}
								}
							}else{
								this.searchParams.yearTime = this.yearQuarterData[0].value
								if(this.yearQuarterData[0].children.length){
									this.searchParams.quarterTime = this.yearQuarterData[0].children[0].label
									this.searchParams.quarterId = this.yearQuarterData[0].children[0].value
								}
							}
						}
						if(call){
							call()
						}
					}else{
						this.$refs.uToast.show({
							title: '获取调研周期数据失败',
							type: 'error',
							duration: 3000
						});
					}
				})
			},
			getEvaluationList(){
				if(!this.hasMore){
					return
				}
				xcxIsEvaluation(this.searchParams, res=>{
					if(res.data.code==200){
						this.evaluationList = this.evaluationList.concat(res.data.rows)
						if(res.data.rows.length<this.searchParams.pageSize){
							this.searchParams.pageNum++
							this.hasMore = false
						}else{
							this.searchParams.pageNum++
							this.hasMore = true
						}
					}else{
						this.$refs.uToast.show({
							title: '获取调研列表数据失败',
							type: 'error',
							duration: 3000
						});
					}
				})
			},
			reloadData(){
				this.hasMore = true
				this.searchParams.pageNum = 1
				this.evaluationList = []
				this.getEvaluationList()
			},
			toEdit(item){
				if(item.isEvaluation=="已填写"){
					return
				}
				uni.navigateTo({
					url:"edit?storeId="+item.storeId+"&quarterId="+this.searchParams.quarterId,
					events: {
						reloadPage: data => {
							this.reloadData()
						}
					}
				})
			}
		},
		onReachBottom() {
			this.getEvaluationList()
		},
		onLoad() {
			this.LOGINACTION()
			this.searchParams.code = this.CONFIG.user.id
			this.getMemberInfoByMemCode(this.CONFIG.user.id, ()=>{
				this.getXcxYear(()=>{
					this.getEvaluationList()
				})
			})
		}
	}
</script>

<style>
	uni-page-body{
		height: 100%;
		background-color: #F2F2F2;
	}
	.search-bar{
		background-color: #FFFFFF;
		margin-bottom: 14rpx;
		padding-bottom: 40rpx;
	}
	.search-row{
		padding: 10rpx 30rpx;
		margin-bottom: 10rpx;
	}
	.search-row.flex-row{
		display: flex;
		align-items: center;
	}
	.search-input{
		background-color: #F7F7F7;
		display: flex;
		align-items: center;
		padding: 0 2rpx 0 30rpx;
		border-radius: 16rpx
	}
	.search-input .search-btn{
		padding: 28rpx;
	}
	.search-text{
		font-size: 26rpx;
		font-family: PingFangSC-Regular;
		color: #4F5A61;
		flex: 0 0 auto;
	}
	.search-selector{
		height: 88rpx;
		line-height: 88rpx;
		background: #F7F7F7;
		border-radius: 16rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular;
		color: #333333;
		text-align: center;
		flex: 0.5;
		position: relative;
		margin-right: 20rpx;
	}
	.search-selector:last-child{
		margin-right: 0;
	}
	.search-selector .u-icon{
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translate(0, -50%);
	}
	
	.list{
		background-color: #FFFFFF;
	}
	.item{
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}
	.item::after{
		content: "";
		position: absolute;
		bottom: 0;
		left: 20rpx;
		right: 20rpx;
		height: 1px;
		background-color: #F2F2F2;
	}
	.item-content{
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		color: #555555;
		margin-right: 38rpx;
		flex: 1;
	}
	.item-state{
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		color: #FF8500;
		flex: 0 0 auto;
	}
	.item-state.finished{
		color: #000000;
	}
</style>
